<template>
  <div><el-dialog
      title="调整寝室"
      :visible.sync="dialogVisible"
      width="30%"
  >
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="转入园区">
        <el-select v-model="form.area" placeholder="请选择转入园区" @change="handleAreaSelect">
          <el-option   v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="转入楼栋">
        <el-select v-model="form.building" placeholder="请选择转入楼栋" @change="handleBuildingSelect">
          <el-option  v-for="item in buildingList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="房间">
        <el-select v-model="form.room" placeholder="请选择转入房间">
          <el-option  v-for="item in roomList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </span>
  </el-dialog></div>
</template>
<script>
import {_searchAreaByName} from '../../../../api/super_admin'
import {_addAdjustRecord, _selectBuildingsByAreaID, _selectRoomsByBuildingID} from '../../../../api/student'

export default {
  name: 'DormitoryAdjustDialog',
  created () {
    let DOT = {
      pageSize: 10000,
      pageNo: 1,
      data: {areaName: ''}
    }
    _searchAreaByName(DOT).then(res => {
      if (res.status) {
        this.areaList = res.data
      }
    })
  },
  data () {
    return {
      dialogVisible: false,
      form: {
        area: null,
        building: null,
        room: null
      },
      areaList: [],
      buildingList: [],
      roomList: []
    }
  },
  methods: {
    show () {
      this.dialogVisible = true
    },
    handleAreaSelect () {
      _selectBuildingsByAreaID(this.form.area).then(res => {
        if (res.status) {
          this.buildingList = res.data
        }
      })
    },
    handleBuildingSelect () {
      _selectRoomsByBuildingID(this.form.building).then(res => {
        if (res.status) {
          this.roomList = res.data
        }
      })
    },
    submit () {
      this.$confirm('确定提交入住申请？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _addAdjustRecord(JSON.parse(localStorage.getItem('user')).id, this.form.room, JSON.parse(localStorage.getItem('user')).room).then(res => {
          if (res.status) {
            this.$message({
              message: '调整寝室申请提交成功',
              type: 'success'
            })
            this.dialogVisible = false
          } else {
            this.$message({
              message: '调整寝室申请提交失败',
              type: 'error'
            })
          }
        })
      }
      ).catch()
    }
  }
}
</script>
<style scoped>

</style>
